"use client";
import style from "./page.module.css";
import PrimaryList from "@/components/List";
import CategoryBar from "@/components/CategoryBar";
import { List } from "antd";
import { getPostByUser, getType } from "@/api";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

export interface DataType {
  id: number;
  createTime: string;
  postAuthorName: string;
  postPhoto: string;
  postTitle: string;
  postType: string;
  postSummary: string;
  postContent: string;
  postStatus: number;
  cause: string;
  updateTime:string;
}
export default function Home() {
  const [postData, setPostData] = useState([]);
  const [listData, setListData] = useState([]);
  const [data, setData] = useState<DataType[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [total, setTotal] = useState(0);
  const [typeName, setTypeName] = useState<string | null>(null);
  const router = useRouter();

  const handleClickRoute = (id: number) => {
    router.push(`/PostContentView?postId=${id}`);
  };

  const getPostType = async () => {
    const res = await getType({ differ: "post", pageNum: 1, pageSize: 100 });
    if (res.data.data.records.length <= 9) {
      const newData = res.data.data.records.map((item: any) => item.typeName);
      setPostData(newData);
    } else {
      const newData = res.data.data.records
        .slice(0, 9)
        .map((item: any) => item.typeName);
      newData.push("更多");

      const newListData = res.data.data.records
        .slice(9)
        .map((item: any) => item.typeName);
      setPostData(newData);
      setListData(newListData);
    }
  };
  const getPostList = async (
    pageNum: number = 1,
    pageSize: number = 10,
    postType?: string | null
  ) => {
    const res = await getPostByUser({
      pageNum,
      pageSize,
      postType,
    });
    const postArr = res.data.data.records.map((item: any) => item.post);
    setTotal(postArr.length);
    setData(postArr);
    setLoading(false);
  };

  // 分类筛选
  const handleClickData = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    setTypeName(e.currentTarget.textContent);
  };
  const handleClickList = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    setTypeName(e.currentTarget.textContent);
  };
  useEffect(() => {
    localStorage.getItem('token')&&getPostType();
  }, []);
  return (
    <div className={style["homeContainer"]}>
      <div className={style["carouselContainer"]}>
        <CategoryBar
          content={
            <List
              size="small"
              dataSource={listData}
              renderItem={(item: any, index: number) => (
                <List.Item
                  key={"list_" + index}
                  style={{ cursor: "pointer" }}
                  onClick={(e) => handleClickList(e)}
                >
                  {item}
                </List.Item>
              )}
              className={style["list"]}
            />
          }
          data={postData}
          className={style["barCss"]}
          onClick={(e) => handleClickData(e)}
        />
      </div>
      <div className={style["content"]}>
        <div className={style["list"]}>
          <PrimaryList
            typeName={typeName}
            getList={getPostList}
            data={data}
            loading={loading}
            total={total}
            handleClick={handleClickRoute}
          />
        </div>
      </div>
    </div>
  );
}
